<template>

	<!--vue模块组件所有内容，都放到一个跟节点里面-->
	<div id="app">
		<input type="text" v-model="todo" @keydown="add" />
		<button @click="toAdd">+增加</button>
		<br />
		<hr />
		<h2>正在进行</h2>
		<ul>
			<li v-for="(item,key) in list" v-if="!(item.check)">
				<input type="checkbox" v-model="item.check" @change="saveData()"/> {{item.title}}-----------
				<button @click="dalateData(item.title)">删除</button>

			</li>
		</ul>

		<br />
		<hr />
		<h2>已经完成</h2>
		<ul>
			<li v-for="(item,key) in list" v-if="(item.check)">
				<input type="checkbox" v-model="item.check"/> {{item.title}}--------
				<button @click="dalateData(item.title)">删除</button>

			</li>
		</ul>

	</div>
</template>

<script>
import storage from './model/storage.js';
	/*console.log(storage);*/
	export default {
		name: 'app',
		data() { //业务逻辑需要的数据
			return {
				todo: "",
				list: []

			}

		},
		methods: {
			add(e) {
				if(e.keyCode == 13) {
					this.toAdd();

				}

			},
			toAdd() {
				this.list.push({
					title: this.todo,
					check: false
				});

				this.todo = "";
				
			  storage.set('key',this.list);
				
			},
			dalateData(key) {
				
				this.list.splice(key, 1);
				
				 storage.set('key',this.list);
			},
			saveData(){
				storage.set('key',this.list);
			}
		},
		mounted(){//生命周期函数
			var data2 = storage.get('key');
			if(data2){
				this.list=data2;
			}
			
		}
	}
</script>